<template>
  <div class="user-info-page">
    <el-card class="box-card">
      <!-- 用户基本信息 -->
      <h2>用户信息</h2>
      <div class="user-basic-info">
        <el-avatar :size="100" :src="user.avatarUrl"></el-avatar>
        <div class="user-details">
          <p>用户名：{{ user.name }}</p>
          <p>ID：{{ user.email }}</p>
          <p>生日：{{ user.registrationDate }}</p>
        </div>
      </div>

      <!-- 收藏的餐厅列表 -->
      <div class="favorite-restaurants">
        <h3>收藏的餐厅</h3>
        <el-table :data="user.favoriteRestaurants" style="width: 100%">
          <el-table-column prop="name" label="餐厅名称" width="180"></el-table-column>
          <el-table-column prop="location" label="位置"></el-table-column>
          <el-table-column prop="rating" label="评分" width="100"></el-table-column>
        </el-table>
      </div>

      <!-- 历史操作记录 -->
      <div class="history-records">
        <h3>历史操作记录</h3>
        <el-timeline>
          <el-timeline-item
              v-for="(item, index) in user.historyRecords"
              :key="index"
              :timestamp="item.date"
              placement="top">
            <el-card>
              <h4>{{ item.type }}</h4>
              <p>{{ item.description }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-card>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'UserInfoPage',
  setup() {
    // 模拟的用户数据
    const user = ref({
      avatarUrl: 'src/static/头像.jpg',
      name: '胡珈',
      email: '22111303189',
      registrationDate: '2004-05-16',
      favoriteRestaurants: [
        { name: '小野日禾·料理小屋', location: '镜湖区镜湖路1号', rating: 4.9 },
        { name: '许府牛（苏宁广场店）', location: '镜湖区中山路11号苏宁广场8楼', rating: 4.8 },
        // 更多餐厅...
      ],
      historyRecords: [
        { date: '2024-11-20', type: '评论', description: '在小野日禾留下了评论' },
        { date: '2024-11-29', type: '收藏', description: '收藏了许府牛' },
      ]
    });

    return {
      user,
    };
  },
});
</script>
<style>
.user-info-page {
  padding: 20px;
  background-color: #f0faff;
}

.box-card {
  width: 100%;
}

.user-basic-info {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.user-details {
  margin-left: 20px;
}

.user-details p {
  margin: 4px 0;
  color: #333; /* 文字颜色 */
}

.favorite-restaurants,
.history-records {
  margin-top: 20px;
}

h2 {
  color: #409eff; /* 蓝色标题 */
  margin-bottom: 10px;
}

.el-table .el-rate__item {
  color: #f56c6c; /* 评分颜色 */
}

.el-timeline-item__timestamp {
  color: #409eff; /* 时间线时间颜色 */
}

.el-timeline-item--primary .el-timeline-item__node {
  background-color: #409eff; /* 时间线节点颜色 */
  border-color: #409eff;
}
</style>